<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>监管等级</title>
    <link href="${request.contextPath}/static/css/layout.css" rel="stylesheet" type="text/css"/>
    <link href="${request.contextPath}/static/css/cb.css" rel="stylesheet" type="text/css"/>
    <link href="${request.contextPath}/static/css/n.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/static/easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/static/easyui/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/static/easyui/demo/demo.css"/>
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/static/js/laypage/skin/laypage.css"/>
    <script type="text/javascript" src="${request.contextPath}/static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/static/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="${request.contextPath}/static/js/vue/vue.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="${request.contextPath}/static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/static/js/laypage/laypage.js"></script>
    <script type="text/javascript" src="${request.contextPath}/static/laydate/laydate.js"></script>
</head>
<div id="app">
    <body>
    <table width="99%" border="0" align="center" cellpadding="0"
           cellspacing="0">
        <tr>
            <td width="1%" align="left" background="${request.contextPath}/static/images/b2.jpg"><img
                    src="${request.contextPath}/static/images/b1.jpg" width="10" height="26"/></td>
            <td width="68%" background="${request.contextPath}/static/images/b2.jpg">
                <table width="124"
                       border="0" align="left" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="20" align="left"><img src="${request.contextPath}/static/images/tz.gif"
                                                         width="10" height="16"/></td>
                        <td width="104" align="left" class="biao">监管等级查询</td>
                    </tr>
                </table>
            </td>
            <td width="31%" align="right" background="${request.contextPath}/static/images/b2.jpg"><img
                    src="${request.contextPath}/static/images/b3.jpg" width="9" height="26"/></td>
        </tr>
    </table>
    <table width="99%" border="0" align="center" cellpadding="3"
           cellspacing="1" bgcolor="#AEDEF4">
        <tr>
            <td align="center" bgcolor="#E2F7FE">
                <table width="80%" border="0" cellspacing="1" cellpadding="3">
                    <tr>
                        <td width="10%" align="right">矫正单位:</td>
                        <td width="10%" align="left">
                            <select id="jid1" onchange="getMovePersonel()">
                                <option value="0">任意</option>
                                <option v-for="j in jnames" :value="j.id">{{j.name}}</option>
                            </select>
                        </td>
                        <td width="10%" align="right">姓名:</td>
                        <td width="10%" align="left">
                            <select id="cid1" style="width:120px; height: 17px">
                                <option value="0">任意</option>
                                <option v-for="item in names" :value="item.id">{{item.name}}</option>
                            </select>
                        </td>
                        <td width="10%" align="left">
                            <input type="button" onclick="getPageList()" value="查 找"/>
                        </td>
                        <td width="10%" align="right">
                            <input type="button" onclick="addEvent()" value="增加记录"/>
                            <input type="button" onclick="deleteBut()" value="批量删除"/>
                        </td>
                        <td width="10%" align="right">
                            <input type="button" onclick="exportBut()" value="导出所选"/>
                            <input type="button" onclick="outExcel()" value="全部导出"/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <table width="50%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td height="5"></td>
        </tr>
    </table>
    <table width="99%" border="0" align="center" cellpadding="0"
           cellspacing="0">
        <tr>
            <td width="1%" align="left" background="${request.contextPath}/static/images/b2.jpg"><img
                    src="${request.contextPath}/static/images/b1.jpg" width="10" height="26"/></td>
            <td width="68%" background="${request.contextPath}/static/images/b2.jpg">
                <table width="124"
                       border="0" align="left" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="20" align="left"><img src="${request.contextPath}/static/images/tz.gif"
                                                         width="10" height="16"/></td>
                        <td width="104" align="left" class="biao">监管等级列表</td>
                    </tr>
                </table>
            </td>
            <td width="31%" align="right" background="${request.contextPath}/static/images/b2.jpg"><img
                    src="${request.contextPath}/static/images/b3.jpg" width="9" height="26"/></td>
        </tr>
    </table>
    <table width="99%" border="0" align="center" cellpadding="3"
           cellspacing="1" bgcolor="#AEDEF4" style="border: 1px solid #AEDEF4">
        <tr>
            <td align="center" bgcolor="#EFFBFE">
                <input id="all" type="checkbox"/>
            </td>
            <td width="5%" height="25" align="center" bgcolor="#EFFBFE">序号</td>
            <td align="center" bgcolor="#EFFBFE">矫正单位</td>
            <td align="center" bgcolor="#EFFBFE">姓名</td>
            <td align="center" bgcolor="#EFFBFE">监管等级</td>
            <td align="center" bgcolor="#EFFBFE">报到频率</td>
            <td align="center" bgcolor="#EFFBFE">思想汇报</td>
            <td align="center" bgcolor="#EFFBFE">管理操作</td>
        </tr>
        <tbody>
        <tr v-for="(item,index) in result"
            onmouseout="this.style.backgroundColor='#ffffff'"
            bgcolor="#ffffff" onmouseover="this.style.backgroundColor='#E6F2FF'">
            <td align="center">
                <input name="check" type="checkbox" :value="item.id"/>
            </td>
            <td height="25" align="center">{{index+1}}</td>
            <td align="center" class="t5">
                <div align="center">
                    <strong>{{item.jname}}</strong>
                </div>
            </td>
            <td align="center">{{item.name}}</td>
            <td align="center">{{item.grade}}</td>
            <td align="center">{{item.frequency}}</td>
            <td align="center">{{item.report}}</td>
            <td align="left">
                <div align="left" style="padding-left: 5px">
                    <div align="center">
                        <input type="button" @click="checkEvent(item.id)" name="" value="查看"/>
                        <input type="button" @click="editEvent(item.id)" name="" value="修改"/>
                        <input type="button" @click="delEvent(item.id)" name="" value="删除"/>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="6" align="center">
                <div id="pagediv"></div>
            </td>
        </tr>

        </tbody>
    </table>
    <!-- 增加期满登记弹出框 -->
    <div id="dlg"></div>
    <!-- 查看期满登记弹出框 -->
    <div id="dlg1"></div>
    <!-- 修改期满登记弹出框 -->
    <div id="dlg2"></div>
    <!-- js代码控制增删改查弹出层 -->
</div>
<!-- js代码控制增删改查弹出层 -->
<script>
    var app = new Vue({
        el: '#app',
        data: {
            names: [],
            jnames: [],
            result: []
        }
    });
    //查找所有司法所
    var getJudicialDeptment = function () {
        $.ajax({
            url: "/judicialDeptment/queryAll",
            data: '',
            success: function (result) {
                app.jnames = result.data;
            }
        });
    }
    //根据矫正单位查找所有服刑人员
    var getMovePersonel = function () {
        $.ajax({
            url: "/movePersonel/getAllCorrectedPerson",
            data: {
                id: $('#jid1').val()
            },
            success: function (result) {
                app.names = result.data;
            }
        });
    }
    getJudicialDeptment();
    //模糊查询
    var getPageList = function (curr) {
        $.ajax({
            type: "Get",
            dataType: "json",
            url: "/grade/get",
            data: {
                pageNum: curr || 1,
                pageSize: 6,
                jid: $("#jid1").val(),
                id: $("#cid1").val()
            },
            //显示分页
            success: function (msg) {
                app.result = msg.data[0].result;
                laypage({
                    cont: 'pagediv', //容器。值支持id名、原生dom对象，jquery对象
                    pages: msg.data[0].totalPage, //总页数
                    first: "首页",
                    last: "尾页",
                    skip: true, //是否开启跳页
                    skin: '#5675A2',
                    curr: curr || 1, //当前页
                    jump: function (obj, first) { //触发分页后的回调
                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                            getPageList(obj.curr);
                        }
                    }
                });
                invert();  //反选
            }
        });
    }
    //全选反选
    $(function () {
        // 复选框全选反选
        $("#all").click(function () {
            var isChecked = $(this).prop("checked");
            $("input[name='check']").prop("checked", isChecked);
        });
        //更改messager提示为中文
        $.extend($.messager.defaults, {
            ok: "确定",
            cancel: "取消"
        });
    })
    //反选
    var invert = function () {
        $("input[name='check']:checked").each(function () {
            if ($(this).attr("checked", true)) {
                $(this).removeAttr("checked");
            }
        })
    }
    //获取列表
    getPageList();
    //增加监管等级事件
    var addEvent = function () {
        $('#dlg').dialog({
            title: '增加--监管等级',
            width: 600,
            height: 400,
            closed: false,
            cache: false,
            href: '${request.contextPath}/grade/addSkip',
            modal: true,
            buttons: [{
                text: '保存',
                iconCls: 'icon-ok',
                handler: function () {
                    var addForm=new FormData($("#form1")[0]);
                    $.ajax({
                        type: 'POST',
                        url: "${request.contextPath}/grade/add",
                        data: addForm,
                        async: false,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (result) {
                            $.messager.alert({
                                title: '消息',
                                msg: '增加成功!',
                                icon: 'info'
                            });
                            getPageList();
                            $('#dlg').dialog('close');
                        }
                    });
                }
            }, {
                text: '取消',
                handler: function () {
                    $('#dlg').dialog('close');
                }
            }]
        });
    }

    //修改期满登记事件
    var editEvent = function (id) {
        $('#dlg2').dialog({
            title: '修改---监管等级',
            width: 600,
            height: 400,
            closed: false,
            cache: false,
            href: '${request.contextPath}/grade/detail?id=' + id,
            modal: true,
            buttons: [{
                text: '保存',
                iconCls: 'icon-ok',
                handler: function () {
                    var editForm = new FormData($("#form2")[0]);
                    $.ajax({
                        type: 'POST',
                        url: '${request.contextPath}/grade/edit',
                        data: editForm,
                        async: false,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (result) {
                            $.messager.alert({
                                title: '消息',
                                msg: '修改成功!',
                                icon: 'info'
                            });
                            getPageList();
                            $('#dlg2').dialog('close');
                        }
                    });
                }
            }, {
                text: '取消',
                handler: function () {
                    $('#dlg2').dialog('close');
                }
            }]
        });
    }

    //查看监管等级详情事件
    var checkEvent = function (id) {
        $('#dlg1').dialog({
            title: '查看---期满登记',
            width: 720,
            height: 450,
            closed: false,
            cache: false,
            href: '${request.contextPath}/grade/getidgrade?id=' + id,
            modal: true,
        });
    }

    //删除期满登记事件
    var delEvent = function (id) {
        $.extend($.messager.defaults, {
            ok: "确定",
            cancel: "取消"
        });
        $.messager.confirm('提示框', '你确定要删除吗?', function (res) {
            if (res) {
                $.ajax({
                    url: "${request.contextPath}/grade/del",
                    dataType: "json",
                    data: {
                        id: id
                    },
                    success: function (result) {
                        $.messager.alert({
                            title: '消息',
                            msg: '删除成功!',
                            icon: 'info'
                        });
                        getPageList();
                    }
                });
            } else {

            }
        })
    }
    //批量删除监管等级
    var deleteBut = function () {
        var ids = [];
        $("input[name='check']:checked").each(function () {
            ids.push($(this).val());
        })
        if (ids.length == 0) {
            $.messager.alert({
                title: '消息',
                msg: '请选择要删除的信息!',
                icon: 'info'
            });
        } else {
            $.messager.confirm('提示框', '你确定要删除吗?',
                    function (res) {
                        if (res) {
                            $.ajax({
                                url: "/grade/deleteBatch",
                                data: {
                                    ids: ids
                                },
                                success: function (result) {
                                    if (result.code == 0) {
                                        $.messager.alert({
                                            title: '消息',
                                            msg: '删除成功!',
                                            icon: 'info'
                                        });
                                        getPageList();
                                    }
                                }
                            });
                        } else {
                            // 取消
                        }
                    })
        }
    }
    //导出Excel
    function outExcel() {
        var url = "${request.contextPath}/grade/excel";
        window.open(url);
    }
    //批量导出
    var exportBut = function () {
        var ids = [];
        $("input[name='check']:checked").each(function () {
            ids.push($(this).val());
        })
        if (ids.length == 0) {
            $.messager.alert({
                title: '消息',
                msg: '请选择需要导出的信息!',
                icon: 'info'
            });
        } else {
            $.messager.confirm('提示框', '你确定要导出吗?',
                    function (res) {
                        if (res) {
                            var url = "/grade/excel?ids=" + ids;
                            window.open(url);
                        } else {
                            // 取消
                        }
                    })
        }
    }

</script>


</body>
</html>